<template>
  <div v-cloak>
      <nav-bar title="Customer Reviews"></nav-bar>
      <div class="t mf">
          <div class="t-rating mf">
              <rating :value="averageStar" readonly></rating>
              <div class="t-num">{{commonNum}}</div>
          </div>
          <div class="t-toadd" @click="toadd">Write a Review</div>
      </div>
      <div class="tline"></div>
      <common-item @like="changeLike" v-for="(common,idx) in commonList" :key="idx" :common="common"></common-item>
  </div>
</template>

<script>
import NavBar from "components/navBar/navBar"
import Rating from "components/rating/rating"
import commonItem from "components/commonItem/commonItem"

import {getCommonData} from "network/common"

export default {
  data () {
    return {
        commonList: []
    };
  },

  components: {
      NavBar,
      Rating,
      commonItem
  },

  computed: {
      averageStar(){
          return this.commonList.map(v=>v.rate).reduce((p,v)=>{return p+v},0) / this.commonNum;
      },
      commonNum(){
          return this.commonList.length;
      }
  },
  created(){
      this.$toast.loading();
      getCommonData().then(d => {
          this.commonList.push(...d)
          this.$toast.hide();
          console.log(this.commonList)
      })
  },
  methods: {
      toadd(){
          this.$router.push("/addCommon")
      },
      changeLike(type, commonId){
          const common = this.commonList.filter(v => v.id == commonId)[0];
          common.changeLike(type);
      }
  }
}

</script>
<style scoped>
    .t {
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;

    }
    .t-rating {
        align-items: center;
    }

    .t-num {
        padding-left: 10px;
        color: #6F6E73;
        font-size: 16px;
    }

    .t-toadd {
        background-color: #24242C;
        color: white; 
        width: 130px;
        font-size: 14px;
        height:  40px;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
    }

    .tline {
        background-color: #F4F5F7;
        height: 12px;
        margin: 10px 10px;
        overflow: hidden;

    }
    
</style>